<template>
  <div class="pagss">

    <div style="height: 20px;"></div>
    <Navvz></Navvz>

    <div class="panel-group1 center">


      <div style="background: ;width: 80%;height: 100%;">

        <div class="f_28 mt_20 mb_20">{{courseInfo.title}}</div>

        <el-row>
          <el-col :span="18">
            <div class=" bg-purple-a">
              <div style="height: 650px;background: #000000;">
                <video :src="video" width="100%" height="100%" controls autoplay loop ref="videoPlayer">
                  <source :src="video" type="video/mp4">
                </video>
              </div>
              <div style="height: 60px;background:#26262B;" class="row_a_c space-between">
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class=" bg-purple-b">

              <div style="padding: 20px; background: #333333;" class="row space-between">

                <div class="row_a_c" v-if="courseInfo.teacher">
                  <div>
                    <img style="width: 66px;height: 66px;border-radius: 66px;" :src="courseInfo.teacher.picture" />
                  </div>

                  <div style="margin-left: 10px;">
                    <div class="f_20 color_fff">{{courseInfo.teacher.title}}</div>
                    <div class="f_16" style="color: #C3C3C3;width: 120px;">关注人数：{{courseInfo.teacher.f_num}}</div>
                  </div>
                </div>

                <div v-if="teacher_type==1" class="gzan center mt_20 cursor">
                  <div class="f_16 ml_5 " style="color: #FFD500;" @click="attention(0)">已关注</div>
                </div>

                <div v-else class="gzan center mt_20 cursor">
                  <i class="el-icon-plus"></i>
                  <div class="f_16 ml_5" @click="attention(1)">关注</div>
                </div>

              </div>



              <div style="width: 100%;height: 60px;font-size: 18px;color: #ffffff;margin-left: 30px;" class="row_a_c">
                目 录
                <!-- <el-menu style="width: 100%;" :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
                  @select="handleSelect">
                  <el-menu-item>目录</el-menu-item>
                </el-menu> -->
              </div>

              <div class="row_a_c itemh2 cursor" v-for="(item, index) in courseInfo.section" :key="index"
                @click="play(item,index)" :class="{ itemh: activeIndex == index }">
                <div class="yy"></div>
                <div class="f_16 color_fff">{{item.title}}</div>
              </div>




            </div>
          </el-col>
        </el-row>




      </div>







    </div>


  </div>
</template>

<script>
  import Navvz from "@/components/Navvz";
  import Sidebartss from "@/components/Sidebartss";
  import * as Course from "@/api/system/course";

  export default {
    name: 'VideoCourse',
    components: {
      Navvz,
      Sidebartss,
    },
    data() {
      return {
        teacher_id: '',
        type: '', //相看是否收藏该章节
        teacher_type: '', //相看是否关注老师
        section_id: '',
        duration: 0,
        time_c: '',
        video: '',
        courseInfo: '',
        relevantVideo: [], //相关视频
        activeIndex: '0',
      }
    },
    created() {

    },
    beforeDestroy() {},
    mounted() {
      this.id = this.$route.query.id;
      this.getCourseShow(); //课程,章节详情
      this.getRelevantVideo(); //相关视频


    },
    watch: {
      '$route.params'(newValue, oldValue) {
        this.id = this.$route.query.id;
        this.getCourseShow(); //课程,章节详情
        this.getRelevantVideo(); //相关视频

      },
    },
    methods: {


      play(item, index) {
        this.video = item.video
        this.activeIndex = String(index)
        this.section_id = item.id
        this.getCollectState(); //查询是否收藏章节
        this.learningRecordAdd(this.section_id); //增加学习记录
      },
      /*增加学习记录*/
      learningRecordAdd(section_id) {
        var per = {
          section_id: section_id,
        };
        Course.LearningRecordAdd(per).then(response => {});
      },

      /*收藏(取消)章节*/
      collect(type) {
        //type1收藏 0取消收藏
        var per = {
          type: type,
          section_id: this.section_id,
        };
        Course.CollectAdd(per).then(response => {
          this.$modal.msgSuccess("成功");
          this.getCollectState();
        });
      },


      /*关注老师*/
      attention(type) {
        //type1关注 0取消关注
        var per = {
          type: type,
          teacher_id: this.teacher_id,
        };
        Course.Attention(per).then(response => {
          this.getIsteacher();
          this.$modal.msgSuccess("成功");

        });
      },

      /*查询是否收藏章节*/
      getCollectState() {
        var per = {
          section_id: this.section_id,
        };
        Course.GetCollectState(per).then(response => {
          if (response.data) {
            this.type = response.data.type
          } else {
            this.type = 0
          }
        });
      },

      /*查询是否关注老师*/
      getIsteacher() {
        var per = {
          teacher_id: this.teacher_id,
        };
        Course.GetIsteacher(per).then(response => {
          if (response.data) {
            this.teacher_type = response.data.type
          } else {
            this.teacher_type = 0
          }
        });
      },




      getVideoDuration(video) {
        const videoElement = event.target;
        const durationInSeconds = Math.floor(videoElement.duration);
        const minutes = Math.floor(durationInSeconds / 60);
        const seconds = durationInSeconds % 60;
        video.duration = `${minutes}分 ${seconds}秒`;

      },
      /*相关视频(课程相关) */
      getRelevantVideo() {

        Course.RelevantVideo(this.id).then(response => {

          this.$nextTick(() => {
            this.relevantVideo = response.data.rows
          })
          this.$forceUpdate();

          this.time_c = new Date().getTime();
        });
      },

      /*课程,章节详情 */
      getCourseShow() {
        Course.Show(this.id).then(response => {
          this.courseInfo = response.data

          setTimeout(() => {
            this.teacher_id = this.courseInfo.teacher.id
            this.video = this.courseInfo.section[0].video
            this.section_id = this.courseInfo.section[0].id

            this.learningRecordAdd(this.section_id); //增加学习记录
            this.getCollectState(); //查询是否收藏章节
            this.getIsteacher(); //查询是否关注老师
            this.$refs.videoPlayer.load(); // 手动重新加载视频
          }, 1000);
        });
      },

      toUrl(url) {
        this.$router.push({
          path: url
        })
      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }

    }
  }
</script>

<style lang="scss" scoped>
  .pagss {
    height: 100%;
    background: #E4EEF9;
    // padding: 5px 0 15px 40px;
  }

  .panel-group1 {
    padding: 25px;
    margin-top: 18px;
    margin-bottom: 0px;
    margin-right: 15px;
    margin-left: 15px;
    min-height: 760px;
    background: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
  }


  .bg-purple-a {
    height: 710px;
    background: #F9F9F9;
    // padding: 30px;
  }

  .bg-purple-b {
    height: 710px;
    background: #2D2D2D;


    // padding: 30px;
    // margin-bottom: 30px;
  }

  .bg-purple-c {
    height: 560px;
    background: #F9F9F9;
    padding: 30px;
    overflow: hidden;
  }

  .bg-purple-d {
    height: 560px;
    background: #F9F9F9;
    padding: 35px;
    margin-bottom: 30px;

  }

  .gzan {
    width: 82px;
    height: 28px;
    background: #444444;
    border-radius: 4px;
    color: #ffffff;
  }


  .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
  .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus {
    background-color: #2D2D2D;
  }

  .el-menu--horizontal>.el-menu-item.is-active {
    border-bottom: 0px solid;
    color: #fff;
  }


  .is-active {
    color: #C3C3C3;
  }

  .is-active::after {
    content: '';
    width: 50%;
    height: 1px;
    display: block;
    margin: 0 auto;
    border-bottom: 2px solid #448DFF;
    padding: 1px;
  }

  .el-menu--horizontal>.el-menu-item {
    font-size: 20px;
  }



  .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
  .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus {
    color: #fff;
  }

  .el-menu.el-menu--horizontal {
    border-bottom: solid 1px #000000;
  }

  .el-menu--horizontal>.el-menu-item {
    width: 50%;
    text-align: center;

    // background-color: #448DFF;
  }

  .itemh {
    height: 60px;
    background: #1E1E1E !important;
    padding: 20px;
    text-align: center;
  }

  .itemh2 {
    height: 60px;
    background: #2D2D2D;
    padding: 20px;
    text-align: center;
  }

  .yy {
    margin-top: 5px;
    width: 13px;
    height: 13px;
    border: 1px solid #FFFFFF;
    border-radius: 50%;
    margin-right: 10px;
  }

  .kcx {
    width: 74px;
    height: 4px;
    background: #448DFF;
    position: absolute;
    top: 78px;
  }

  .htb {
    width: 137px;
    height: 83px;
    background: #7A7A7A;
    border-radius: 4px;
  }

  .kcjsxian {
    width: 150%;
    height: 2px;
    background: #DEDEDE;
    margin-left: -35px;
    margin-top: 25px;
    margin-bottom: 25px;
  }

  .hybxian {
    width: 150%;
    height: 2px;
    background: #DEDEDE;
    margin-left: -35px;
    margin-top: 20px;
    margin-bottom: 25px;
  }
</style>